<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJs下拉列表框</title>
    <meta name="Copyright" content="All Rights Reserved"/>
    <link rel="shortcut icon" type="image/x-icon" href="itcast.ico"/>
    <link rel="stylesheet" type="text/css" href="base.css"/>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        /**
         * 定义模块
         */
        var myApp = angular.module("myApp",[]);

        /**
         * 模块中添加控制器
         */
        myApp.controller("myController",function ($scope) {
            /**
             * 定义下拉表单框需要的数据变量
             */
            $scope.cities = [
                {id:1,name:'广州市'},
                {id:2,name:'深圳市'},
                {id:3,name:'珠海市'},
                {id:4,name:'东莞市'}
            ]
        })
    </script>
</head>
<!-- 指定AngularJS应用的根元素 -->
<body ng-app="myApp" ng-controller="myController">
    <select ng-model="code" ng-options="city.id as city.name for city in cities">
        <option value="">==请选择==</option>
    </select>
{{code}}
</body>
</html>